import React from 'react'
import cookies from 'browser-cookies'
import { connect } from 'react-redux'
import { Result, List, WhiteSpace, Modal } from 'antd-mobile';
import { logoutSumbit } from '../../redux/user_redux'
import {Redirect} from 'react-router-dom'

@connect(
    state => state.user,
    { logoutSumbit }
)
class User extends React.Component {

    constructor(props) {
        super(props)

        // this.logout = this.logout.bind(this)
    }

    logout() {
        // console.log('11')
        // cookies.erase('userid'); // Removes cookie
        // window.location.href =  window.location.href
        const alert = Modal.alert

        alert('注销', '确定退出?', [
            { text: '取消', style: 'default' },
            {
                text: '确认', onPress: () => {
                    //这种需要页面刷新
                    cookies.erase('userid'); // Removes cookie
                    // window.location.href = window.location.href
                    //清楚 redux 数据
                    this.props.logoutSumbit();
                }
            }
        ])
        // < Button onClick = { showAlert } > customized buttons</Button >

    }
    render() {
        const Item = List.Item
        const Brief = Item.Brief

        return this.props.user ? (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo} /> : null}
                <WhiteSpace />
                <Result
                    img={<img src={require(`../img/${this.props.avatar}.png`)} style={{ width: 50 }} alt='' />}
                    title={this.props.user}
                    message={this.props.type == 'boss' ? this.props.company : null}
                />
                <List renderHeader={() => '简介'} className="my-list">
                    <Item
                        multipleLine
                    >
                        {this.props.title}
                        {this.props.desc.split('\n').map((item) => <Brief key={item}>{item}</Brief>)}
                        {this.props.money ? <Brief>薪资: {this.props.money}</Brief> : null}
                    </Item>
                </List>
                <WhiteSpace />
                <List>
                    <Item onClick={()=>this.logout()}>退出登录</Item>
                </List>
            </div>
        ) : null
    }
}


export default User